<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取本地音视频</title>
  <style>
    * {
      margin: 20px;
      font-size: 0;
      box-sizing: border-box;
    }

    #video {
      background: deepskyblue;
      display: block;
      border-radius: 2px;
      box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.12);
    }
  </style>
</head>
<body>
<video id="video" autoplay loop muted></video>
<script>
  const $video = document.querySelector("#video");
  // 媒体约束
  const constraints = {
    audio: false,
    video: {
      width: 320,
      height: 240,
      // 指定帧率
      frameRate: 24,
      resizeMode: true,
    }
  };

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(mediaStream => {
      $video.srcObject = mediaStream;
      $video.play();
      // 获取视频轨的第一个轨
      const videoTrack = mediaStream.getVideoTracks()[0];
      // 获取约束信息
      const videoConstrants = videoTrack.getSettings();

      /**
       * {
       *   // 纵横比
       *   "aspectRatio": 1.3333333333333333,
       *   // 亮度
       *   "brightness": 0,
       *   // 色温
       *   "colorTemperature": 4650,
       *   // 对比度
       *   "contrast": 32,
       *   "deviceId": "288837aed4b8e27e6154f07c7802a3d955169e7ae24c6fce343438566682f302",
       *   // 曝光
       *   "exposureCompensation": 64,
       *   "exposureMode": "continuous",
       *   "exposureTime": 156.25,
       *   // 前置摄像头
       *   "facingMode": "user",
       *   // 帧速率
       *   "frameRate": 24,
       *   "groupId": "ac9e6ebbacd9b5f02391c19bbae299c651d36a7c2400996bb02f9e607a1f605e",
       *   "height": 240,
       *   // 调整大小模式
       *   "resizeMode": "none",
       *   // 饱和度
       *   "saturation": 64,
       *   // 锐化
       *   "sharpness": 4,
       *   // 白平衡模式
       *   "whiteBalanceMode": "continuous",
       *   "width": 320
       * }
       */
      console.log(JSON.stringify(videoConstrants, null, 2));
    }).catch(console.error);
</script>
</body>
</html>
